<template>
  <div class="wrap">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <h2><span class="s1">HAPPY</span><span class="s2">MMALL</span></h2>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#888"
          active-text-color="#2dafcb"
          router
        >
          <el-menu-item index="myhome">
            <i class="el-icon-s-data"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>商品</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="product">
                <span slot="title">商品管理</span>
              </el-menu-item>
              <el-menu-item index="cart">
                <span slot="title">品类管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-success"></i>
              <span>订单</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="order">
                <span slot="title">订单管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="user">
                <span slot="title">用户管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div class="head">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-submenu index="1">
                <template slot="title">欢迎，admin</template>
                <el-menu-item index="2-1" @click="quit">退出登录</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </el-header>
        <!-- 内容 -->
        <el-main class="boy">
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: "Index",
  data() {
    return {
      activeIndex: '1'
    };
  },
  created() {
    
  },
  methods: {
    // 打开时的下标
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 收起时的下标
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 下拉菜单选中时的下标
    handleSelect(key, keyPath) {
        // console.log(key, keyPath);
    },
    // 退出登录
    quit(){
        sessionStorage.removeItem('token')
        this.$router.push('/login')
    }
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.wrap {
  h2 {
    width: 100%;
    height: 40px;
    background: #32323a;
    .s1 {
      color: aqua;
    }
    .s2 {
      color: white;
    }
  }
  .el-menu {
    height: calc(100vh - 40px);
  }
  .el-submenu,
  .el-menu-item {
    text-align: left;
  }
  .el-header {
    padding: 0;
  }
  .head {
    .el-menu {
      width: 100%;
      height: 100%;
      clear: both;
      .el-submenu {
        float: right;
        
      }
    }
  }
  .boy{
    height: calc(100vh - 60px);
  }
}
</style>
